<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { GetData, PutDetailsRedact } from '@/api/modules/vipgift.ts'

const ruleFormRef = ref<FormInstance>()

const ruleForm: any = ref({
  id: '',
  picUrl: '',
  linkUrl: '',
})

// 图片上传赋值
function handleUploadSuccess(url: string) {
  ruleForm.value.picUrl = url
}

// 提交
async function SubmitData(formEl: FormInstance | undefined) {
  if (!formEl) {
    return
  }
  await formEl.validate((valid) => {
    if (valid) {
      PutDetailsRedact({ ...ruleForm.value }).then((res: any) => {
        if (res.statusCode === 200) {
          ElMessage.success('提交成功')
        }
        else {
          ElMessage.error(`修改失败。${res.errors}`)
        }
      })
    }
    else {
      // console.log('error submit!', fields)
      ElMessage.error('请检查表单')
    }
  })
}

onMounted(() => {
  GetData().then((res: any) => {
    if (res.statusCode === 200) {
      ruleForm.value = res.data
    }
    else {
      ElMessage.error(`获取信息失败。${res.errors}`)
    }
  })
})
</script>

<template>
  <div>
    <PageHeader title="会员礼" />
    <ElForm ref="ruleFormRef" :model="ruleForm">
      <PageMain title="跳转链接">
        <ElRow :gutter="10">
          <ElCol :md="8">
            <ElFormItem label="">
              <el-input v-model="ruleForm.linkUrl" placeholder="请输入链接" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
      <PageMain title="背景">
        <ElRow :gutter="20">
          <ElCol :md="24">
            <ElFormItem label="">
              <ImageUpload
                height="200" width="auto" :size="1"
                :url="ruleForm.picUrl" @on-success="(imgUrl) => handleUploadSuccess(imgUrl)"
              />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
    </ElForm>
    <div style="height: 90px;" />
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="SubmitData(ruleFormRef)">
        提交
      </ElButton>
    </FixedActionBar>
  </div>
</template>

<style scoped>
/* stylelint-disable-next-line no-empty-source */
</style>
